<template>
  <div class="share-box">
    <h4 class="mb-12">{{ $t('Share_with') }}</h4>
    <div
      class="pcsharebuttonbox social-share mb-24"
      data-initialized="true"
      data-sites="facebook, twitter, wechat"
      :data-wechat-qrcode-title="$t('Open_Wechat_to_scan')"
      :data-wechat-qrcode-helper="$t('Open_Wechat_main_page')"
      :data-description="obj.summary"
      :data-image="(obj.thumbs && obj.thumbs[0]) || ''"
      :data-title="obj.title"
    >
      <a href="#" class="social-share-icon icon-facebook"></a>
      <a href="#" class="social-share-icon icon-twitter"></a>
      <a href="#" class="social-share-icon icon-wechat"></a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

<style lang="scss">
.share-box {
  h4 {
    font-size: 12px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 16px;
    font-weight: 500;
  }
}

.pcsharebuttonbox a {
  display: inline-block;
  width: 48px !important;
  height: 48px !important;
  padding: 0px;
  margin: 0 8px 0 0;
}
.pcsharebuttonbox a {
  border: none;
}
.pcsharebuttonbox a::before {
  display: none;
}
.social-share .icon-wechat .wechat-qrcode {
  left: -112px !important;
  width: 285px !important;
}
.pcsharebuttonbox .icon-facebook,
.pcsharebuttonbox .icon-facebook:hover {
  background: url('@/assets/images/facebook.svg') no-repeat;
  background-size: contain;
  background-position: 0 0;
}
.pcsharebuttonbox .icon-twitter,
.pcsharebuttonbox .icon-twitter:hover {
  background: url('@/assets/images/twitter.svg') no-repeat;
  background-size: contain;
  background-position: 0 0;
}
.pcsharebuttonbox .icon-wechat,
.pcsharebuttonbox .icon-wechat:hover {
  background: url('@/assets/images/wechat.svg') no-repeat;
  background-size: contain;
  background-position: 0 0;
}
.wechat-qrcode .help {
  line-height: 1.6;
  padding: 0 6px;
}
.box-shadow {
  box-shadow: 0px 12px 12px -12px rgba(12, 12, 28, 0.08);
}
</style>
